<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<title>Portal Site</title>	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link rel="stylesheet" type="text/css" href="mockup-style.css" />
	<link rel="stylesheet" type="text/css" href="tb.css" />
	<script type="text/javascript" src="inc/jquery-1.3.2.js"></script>
	<script type="text/javascript" src="inc/interface/interface.js"></script>
	<script type="text/javascript" src="inc/sortwidgets.js"></script>
	<script type="text/javascript" src="inc/autoexpand.js"></script>
	<script type="text/javascript" src="inc/thickbox.js"></script>
	<style type="text/css">
		div.widgetscolumn {
			float: left;
			width: 310px;
			margin: 0px 4px;
			min-height: 400px;
		}

		.sortHelper {
			background: url("img/back.png");
			width: 310px;
			border: 1px solid #f57900;
			height: 20px;
		}
	</style>
</head>

<body>
	<ul id="menubar">
		<li id="logo"><a href="#"><img src="img/companionCube.png" alt="Weighted Companion Cube" title="Weighted Companion Cube" /></a></li>
		<li><a href="menu.html?KeepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=350" title="Add widgets" class="thickbox"><img src="img/plus.png" alt="+" /> Add widgets</a></li>
		<li><a href="login.html?KeepThis=true&amp;TB_iframe=true&amp;height=170&amp;width=220" title="Login" class="thickbox"><img src="img/users.png" alt="" /> Login</a></li>
		<li><a href="menu.html?KeepThis=true&amp;TB_iframe=true&amp;height=300&amp;width=350" title="Help" class="thickbox"><img src="img/help.png" alt="F1" /> Help</a></li>

	</ul>
	<div id="desktop">
		<div id="col1" class="widgetscolumn">
			<div class="widget searchbar">
				<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Google bar</h2>
				<form class="wContainer" action="http://www.google.com/search">
					<p><input type="text" id="search" name="q" /></p>
					<p><input type="submit" class="button" value="Search" /></p>
				</form>
			</div>
			<div class="widget stickynote">
				<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Sticky header</h2>
				<div class="wContainer">
					<textarea rows="4" cols="10" onfocus="new ResizingTextArea()"></textarea>
				</div>

			</div>
		</div>
		<div id="col2" class="widgetscolumn">
			<div class="widget email">
				<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Send mail</h2>
				<div class="wContainer">
					<p>To:</p>
					<p><input type="text" name="email_to" /></p>
					<p>Subject:</p>
					<p><input type="text" name="email_subject" /></p>
					<p>Text:</p>
					<p><textarea rows="4" cols="10" name="email"></textarea></p>
					<p><input type="submit" class="button" value="Send mail!" /></p>
				</div>
			</div>
		</div>
		<div id="col3" class="widgetscolumn">
			<div class="widget rss">
				<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> RSS Feed titel</h2>
				<ul class="wContainer">
					<li>RSS header 1</li>
					<li>RSS header 2</li>
					<li>RSS header 3</li>
					<li>RSS header 4</li>
				</ul>
			</div>
			<div class="widget puzzle">
				<h2 class="wHeader"><a href="#" class="minWContainer"><img src="img/windowDown.png" alt="Minimize" /></a> Puzzle</h2>
				<div class="wContainer">
					<img src="img/utrecht/utrecht1.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht2.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht3.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht4.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht5.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht6.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht7.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht8.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht9.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht10.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht11.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht12.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht13.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht14.jpg" class="sortableitem" alt="" />
					<img src="img/utrecht/utrecht15.jpg" class="sortableitem" alt="" />
				</div>
			</div>
		</div>
	</div>
	<div id="footer">
		<p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10-blue" alt="Valid XHTML 1.0 Strict" /></a></p>
  </div>
  <script type="text/javascript">
$(document).ready(
	function () {
		$('div').Sortable(
			{
				accept : 		'sortableitem',
				helperclass : 	'sorthelper',
				activeclass : 	'sortableactive',
				hoverclass : 	'sortablehover',
				opacity: 		0.8,
				/*fx:				200,*/
				revert:			true,
				floats:			true,
				tolerance:		'pointer'
			}
		)
	}
);
	</script>
</body>
</html>
